<template>
	<view class="content">
		<nav-bars title="我的钱包" :bgColor="scrollTop > 60 ? '#fff' : 'rgba(255,255,255,0)'" :fontColor="scrollTop > 60 ? '#000000' : '#fff'"></nav-bars>
		<view class="topBg"><image :src="`${baseimg}/static/superHK/wallet/bg.png`" mode=""></image></view>
		<view class="wrapper">
			<view class="cashOutBox flex align-center justify-between">
				<view class="left">
					个人收益
					<view class="priceNum">{{walletData.person_commission}}</view>
				</view>
				<view class="right" @click="gowithdrawal">提现</view>
			</view>
			<view class="canCashOut flex align-center justify-between">
				<view>可提现金额</view>
				<view>￥{{walletData.cashout_amount}}</view>
			</view>
			<view class="flex align-end mb-21 GoodNav">
				<view
					:class="['GoodsTitle', activate == index ? 'TabsViewTitleActivate' : 'TabsViewTitle']"
					v-for="(item, index) in TabsList"
					:key="index"
					@click="ChangeTabs(item,index)"
				>
					{{ item }}
				</view>
			</view>
			<!-- 团队收益 -->
			<view v-if="activeItem == '团队收益'">
				<view class="orderBox" v-if="teamProfit.length">
					<view class="orderList flex align-center justify-between" v-for="(item,index) of teamProfit" :key="index">
						<view class="left">
							<view class="flex align-center">
								<image :src="`${baseimg}/static/superHK/wallet/order.png`" mode=""></image>
								订单{{item.order_no}}
							</view>
							<view class="time">时间：{{item.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</view>
						</view>
						<view class="right">￥{{item.order_price}}</view>
					</view>
				</view>
				<!-- 空空如也 -->
				<view class="notList" v-else>
					<image :src="`${baseImg}/static/constr/notList.png`" mode=""></image>
					空空如也
				</view>
				<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" v-if="teamProfit.length"/>
			</view>
			<!-- 个人收益 -->
			<view v-else>
				<view class="orderBox" v-if="personProfit.length">
					<view class="orderList flex align-center justify-between" v-for="(item,index) of personProfit" :key="index">
						<view class="left">
							<view class="flex align-center">
								<image :src="`${baseimg}/static/superHK/wallet/order.png`" mode=""></image>
								订单{{item.order_no}}
							</view>
							<view class="time">时间：{{item.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</view>
						</view>
						<view class="right">￥{{item.order_price}}</view>
					</view>
				</view>
				<view class="notList" v-else>
					<image :src="`${baseImg}/static/constr/notList.png`" mode=""></image>
					空空如也
				</view>
				<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" v-if="personProfit.length"/>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetWalletData, GetTeamProfit, GetPersonProfit } from '@/service/superHK.js'
	import Https from '@/service/verification.js'
	export default {
		data() {
			return {
				baseImg:this.$static,
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了~'
				},
				baseimg: this.$static,
				page: 1,
				pagesize: 10,
				goodsList: [],
				activate: 0,
				activeItem:'团队收益',
				TabsList: ['团队收益', '个人收益'],
				scrollTop: 0,
				walletData:{}, //钱包数据
				teamProfit:[],
				personProfit:[]
			}
		},
		onLoad() {
			let moduleType = uni.getStorageSync('moduleType')
			this.TabsList = moduleType==1 || moduleType==2?['团队收益', '个人收益']:['个人收益']
			this.getWalletData();
			if(this.TabsList.length==1){ //当只有个人收益时，调用个人收益列表
				this.activeItem = '个人收益'
				this.GetPersonProfit()
			}else{
				this.activeItem = '团队收益'
				this.getTeamProfit();
			}
			
		},
		onPageScroll(e) {
			let that = this;
			that.scrollTop = e.scrollTop;
		},
		methods: {
			gowithdrawal(){
				var that = this;
				let allCanPrice = that.walletData.cashout_amount
				let params = {};
				// 查询云商通账户信息
				Https.GetAccountMes(params).then(res => {
					if (res.code == 1) {
						// console.log(res.data);
						// member_type 会员类型(2企业会员,3个人会员)   is_realname 是否实名(0否,1是,2实名审核中)  is_phone	 是否绑定手机(0否,1是)
						// is_sign	是否签约(0否,1是)  signContract 签约参数 
						var data = res.data;
						if (data.is_realname == 0) {
							uni.showModal({
								title: '提示',
								content: '暂时还没实名验证,是否实名验证?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										// 会员类型(2企业会员,3个人会员)
										if (data.member_type == 2) {
											uni.navigateTo({
												url: '/pages_Verification/verification/select/certificate'
											});
											return;
										}
										if (data.member_type == 3) {
											uni.navigateTo({
												url: '/pages_Verification/verification/personal/personal'
											});
											return;
										}
									}
								}
							});
							return;
						}
						if (data.is_realname == 1) {
							if (data.is_phone == 0) {
								uni.showModal({
									title: '提示',
									content: '暂时还没绑定手机号,是否绑定?',
									confirmText: '确定',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages_Verification/verification/bindPhone/BindPhone'
											});
										}
									}
								});
							} else if (data.is_sign == 0) {
								uni.showModal({
									title: '提示',
									content: '需要完善支付信息,是否继续?',
									confirmText: '确定',
									success: function(res) {
										if (res.confirm) {
											uni.navigateToMiniProgram({
												appId: 'wxc46c6d2eed27ca0a', //通商云平台账户小程序appId
												path: 'pages/merchantAddress/merchantAddress',
												extraData: {
													// 测试环境地址：url=https://test.allinpay.com/yungateway/member/signContract.html?
													// 生产环境地址：url=https://fintech.allinpay.com/yungateway/member/signContract.html?
													// targetUrl: 'https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param //商户拼接的请求报文
													targetUrl: data.signContract
												},
												envVersion: 'release', //develop 开发版  trial 体验版  release 正式版
												success(res) {
													// 打开成功
													// console.log(res);
												}
											});
										}
									}
								});
							} else if (data.is_phone == 1 && data.is_sign == 1) {
								
								uni.navigateTo({
									url: `/pagesOne/distri/withdCom/withdCom?level=${2}&allCanPrice=${allCanPrice}`
								})
							}
							return;
						}
						if (data.is_realname == 2) {
							if (data.member_type == 3) {
								// 个人
								uni.navigateTo({
									url: '/pages_Verification/verification/status/status?isPersonal=true&status=0&isIndex=true'
								});
							} else if (data.member_type == 2) {
								// 企业
								uni.navigateTo({
									url: '/pages_Verification/verification/status/status?isPersonal=false&status=0&isIndex=true'
								});
							}
							return;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			ChangeTabs(item,index) {
				let that = this;
				that.activate = index;
				that.activeItem = item;
				if(that.TabsList.length == 1){
					that.GetPersonProfit()
				}else{
					if(index == 0){
						that.getTeamProfit()
					}else{
						that.GetPersonProfit()
					}
				}
				
			},
			// 获取钱包数据
			async getWalletData(){
				let that = this;
				let res = await GetWalletData()
				if(res.code == 1){
					that.walletData = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 获取团队收益列表
			async getTeamProfit() {
				let that = this
				that.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					user_id: that.$store.state.index.userId,
					page: that.page,
					pagesize: that.pagesize
				}
				that.statusLoading = 'loading'
				let res = await GetTeamProfit(params)
				if(res.code == 1){
					// console.log(res)
					if(res.data.length<10){
						that.statusLoading = 'nomore'
					}
					that.teamProfit = res.data
					uni.hideLoading()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 获取团队收益列表concat
			async TeamProfitConcat() {
				let that = this
				let params = {
					user_id: that.$store.state.index.userId,
					page: that.page,
					pagesize: that.pagesize
				}
				that.statusLoading = 'loading'
				let res = await GetTeamProfit(params)
				if(res.code == 1){
					// console.log(res)
					if(!res.data.length){
						that.statusLoading = 'nomore'
					}else{
						that.statusLoading = 'loading'
					}
					that.teamProfit = that.teamProfit.concat(res.data)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 获取个人收益列表
			async GetPersonProfit() {
				let that = this
				that.page = 1
				let params = {
					user_id: that.$store.state.index.userId,
					page: that.page,
					pagesize: that.pagesize
				}
				that.statusLoading = 'loading'
				let res = await GetPersonProfit(params)
				if(res.code == 1){
					console.log(res)
					if(res.data.length<10){
						that.statusLoading = 'nomore'
					}
					that.personProfit = res.data
					uni.hideLoading()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 获取个人收益列表Concat
			async PersonProfitConcat() {
				const that = this;
				let params = {
					user_id: that.$store.state.index.userId,
					page: that.page,
					pagesize: that.pagesize
				}
				that.statusLoading = 'loading'
				let res = await GetPersonProfit(params)
				if(res.code == 1){
					// console.log(res)
					if(!res.data.length){
						that.statusLoading = 'nomore'
					}else{
						that.statusLoading = 'loading'
					}
					that.personProfit = that.personProfit.concat(res.data)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			}
		},
		onReachBottom() {
			let that = this
			that.page++
			if(that.TabsList.length == 1){
				that.PersonProfitConcat()
			}else{
				if(that.activate == 0){
					that.TeamProfitConcat()
				}else{
					that.PersonProfitConcat()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		.topBg {
			width: 100%;
			height: 460rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.wrapper {
			padding: 0 24rpx 30rpx;
			.cashOutBox{
				background-color: #fff;
				border-radius: 16rpx;
				padding: 50rpx 24rpx 50rpx 28rpx;
				position: relative;
				top: 155rpx;
				.left{
					color: #464646;
					font: 500 32rpx/45rpx PingFang SC;
					.priceNum{
						font-size: 66px;
						color: #252525;
						font: 500 66rpx/80rpx Roboto;
						padding-top: 7rpx;
					}
				}
				.right{
					padding: 15rpx 62rpx 14rpx 63rpx;
					border-radius: 35rpx;
					background: linear-gradient(129deg, #FEA62B 0%, #F29100 100%);
					color: #FFFFFF;
					font: 500 28rpx/40rpx PingFang SC;
				}
			}
			.canCashOut{
				padding: 32rpx 24rpx 18rpx 27rpx;
				background-color: rgba($color: #30383F, $alpha: 0.04);
				border-radius: 16rpx;;
				font: 500 24rpx/33rpx PingFang SC;
				color: #717171;
				position: relative;
				top: 140rpx;
				z-index: -1;
			}
			.TabsViewTitle {
				color: #A6A6A6;
				font: 500 26rpx/37rpx PingFang SC;
			}
			.TabsViewTitleActivate {
				color: #252525;
				font: bold 32rpx/45rpx PingFang SC;
			}
			.GoodNav {
				margin-top: 200rpx;
				margin-bottom: 22rpx;
				.GoodsTitle {
					position: relative;
					// transition: all 0.4s;
					display: flex;
					align-items: center;
					margin-right: 48rpx;
				}
			}
			.orderBox{
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 0 24rpx 16rpx;
				margin-top: 17rpx;
				.orderList{
					padding: 30rpx 0 25rpx;
					border-bottom: 1px solid #F1F1F1;
					.left{
						color: #252525;
						font: 500 28rpx/40rpx PingFang SC;
						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}
						.time{
							padding-left: 50rpx;
							color: #A6A6A6;
							font: 500 22rpx/30rpx PingFang SC;
							margin-top: 7rpx;
						}
					}
					.right{
						color: #464646;
						font: 500 34rpx/41rpx Roboto;
					}
				}
				
			}
		}
	}
	// 没有数据
	.notList{
		margin: auto;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 426rpx;
		image{
			width: 426rpx;
			height: 356rpx;
			margin-bottom: 40rpx;
		}
		font:500 40rpx/56rpx PingFang SC;
		color: #333;
	}
</style>
